<template>
    <div class="container mt-5">
      <h2>学习计划表</h2>
      <div class="card mb-3">
        <div class="card-body">
          <form @submit.prevent="addPlan">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm" for="subject">学习科目</span>
              <input type="text" class="form-control" id="subject" v-model="newPlan.subject" placeholder="请输入学习科目">
            </div>
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm" for="content">学习内容</span>
              <input type="text" class="form-control" id="content" v-model="newPlan.content" placeholder="请输入学习内容">
            </div>
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm" for="location">学习地点</span>
              <select class="form-control" id="location" v-model="newPlan.location">
                <option>自习室</option>
                <option>图书馆</option>
                <option>在线</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary">添加</button>
          </form>
        </div>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>学习科目</th>
            <th>学习内容</th>
            <th>学习地点</th>
            <th>完成状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(plan, index) in plans" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ plan.subject }}</td>
            <td>{{ plan.content }}</td>
            <td>{{ plan.location }}</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked v-model="plan.completed">
                    <label class="form-check-label" for="flexSwitchCheckChecked">未完成</label>
                </div>
            </td>
            <td>
              <button @click="removePlan(index)" class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const newPlan = ref({
        subject: ' ',
        content: ' ',
        location: ' ',
        completed: false
      });
      const plans = ref([]);
  
      const addPlan = () => {
        if (newPlan.value.subject && newPlan.value.content) {
          plans.value.push({ ...newPlan.value });
          newPlan.value.subject = '';
          newPlan.value.content = '';
        }
      };
  
      const removePlan = (index) => {
        plans.value.splice(index, 1);
      };
  
      return {
        newPlan,
        plans,
        addPlan,
        removePlan
      };
    }
  };
  </script>